﻿<template>
  <div class="analysis-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">馃搳 数据对比分析</span>
          <el-button type="primary" @click="handleAddComparison">
            <el-icon><Plus /></el-icon>
            新增对比
          </el-button>
        </div>
      </template>

      <el-form :inline="true" :model="comparisonForm">
        <el-form-item label="对比维度">
          <el-select v-model="comparisonForm.dimension" placeholder="选择维度" size="small">
            <el-option label="时间对比" value="time" />
            <el-option label="区域对比" value="region" />
            <el-option label="商品对比" value="product" />
            <el-option label="渠道对比" value="channel" />
          </el-select>
        </el-form-item>
        <el-form-item label="对比周期">
          <el-select v-model="comparisonForm.period" placeholder="选择周期" size="small">
            <el-option label="日对比" value="day" />
            <el-option label="周对比" value="week" />
            <el-option label="月对比" value="month" />
            <el-option label="年对比" value="year" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAnalyze">开始分析</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>馃搱 同比增长分析</span>
            </template>
            <div class="chart-container" ref="yoyChart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>馃搲 环比增长分析</span>
            </template>
            <div class="chart-container" ref="momChart"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-card style="margin-top: 20px;">
        <template #header>
          <span>馃攳 多维度对比分析</span>
        </template>
        <div class="chart-container" style="height: 500px;" ref="multiDimensionChart"></div>
      </el-card>

      <el-card style="margin-top: 20px;">
        <template #header>
          <span>馃搵 对比数据明细</span>
        </template>
        <el-table :data="comparisonData" border stripe>
          <el-table-column prop="dimension" label="维度" width="150" />
          <el-table-column prop="currentValue" label="当前值" width="150">
            <template #default="{ row }">
              {{ formatValue(row.currentValue) }}
            </template>
          </el-table-column>
          <el-table-column prop="previousValue" label="对比值" width="150">
            <template #default="{ row }">
              {{ formatValue(row.previousValue) }}
            </template>
          </el-table-column>
          <el-table-column prop="diff" label="差值" width="150">
            <template #default="{ row }">
              <span :style="{ color: row.diff > 0 ? '#67c23a' : '#f56c6c' }">
                {{ row.diff > 0 ? '+' : '' }}{{ formatValue(row.diff) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="growthRate" label="增长率" width="120">
            <template #default="{ row }">
              <el-tag :type="row.growthRate > 0 ? 'success' : 'danger'">
                {{ row.growthRate > 0 ? '+' : '' }}{{ row.growthRate }}%
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="trend" label="趋势分析">
            <template #default="{ row }">
              <div class="trend-indicator">
                <el-icon v-if="row.growthRate > 5" color="#67c23a"><CaretTop /></el-icon>
                <el-icon v-else-if="row.growthRate < -5" color="#f56c6c"><CaretBottom /></el-icon>
                <el-icon v-else color="#e6a23c"><Minus /></el-icon>
                <span>{{ getTrendText(row.growthRate) }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, CaretTop, CaretBottom, Minus } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

const comparisonForm = reactive({
  dimension: 'time',
  period: 'month'
})

const comparisonData = ref([
  { dimension: '销售额', currentValue: 2567890, previousValue: 2234567, diff: 333323, growthRate: 14.9 },
  { dimension: '订单数', currentValue: 12345, previousValue: 10987, diff: 1358, growthRate: 12.4 },
  { dimension: '客单价', currentValue: 288, previousValue: 275, diff: 13, growthRate: 4.7 },
  { dimension: '毛利率', currentValue: 42.5, previousValue: 40.2, diff: 2.3, growthRate: 5.7 }
])

const yoyChart = ref(null)
const momChart = ref(null)
const multiDimensionChart = ref(null)

onMounted(() => {
  initYoyChart()
  initMomChart()
  initMultiDimensionChart()
})

const initYoyChart = () => {
  const chart = echarts.init(yoyChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['今年', '去年'] },
    xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] },
    yAxis: { type: 'value' },
    series: [
      { name: '今年', type: 'line', data: [156, 178, 189, 165, 198, 212, 234], itemStyle: { color: '#667eea' } },
      { name: '去年', type: 'line', data: [134, 156, 167, 148, 172, 185, 204], itemStyle: { color: '#e6a23c' } }
    ]
  })
}

const initMomChart = () => {
  const chart = echarts.init(momChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['本月', '上月'] },
    xAxis: { type: 'category', data: Array.from({ length: 30 }, (_, i) => i + 1) },
    yAxis: { type: 'value' },
    series: [
      { name: '本月', type: 'line', data: Array.from({ length: 30 }, () => Math.random() * 50 + 150), itemStyle: { color: '#f5576c' }, smooth: true },
      { name: '上月', type: 'line', data: Array.from({ length: 30 }, () => Math.random() * 50 + 130), itemStyle: { color: '#909399' }, smooth: true }
    ]
  })
}

const initMultiDimensionChart = () => {
  const chart = echarts.init(multiDimensionChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['销售额', '订单数', '客单价', '毛利率'] },
    radar: {
      indicator: [
        { name: '华东', max: 300 },
        { name: '华南', max: 300 },
        { name: '华北', max: 300 },
        { name: '西南', max: 300 },
        { name: '东北', max: 300 },
        { name: '西北', max: 300 }
      ]
    },
    series: [{
      type: 'radar',
      data: [
        { value: [256, 234, 212, 189, 167, 145], name: '本月' },
        { value: [234, 212, 198, 178, 156, 134], name: '上月' }
      ]
    }]
  })
}

const formatValue = (value) => {
  if (typeof value === 'number') {
    return value > 1000 ? `楼${value.toLocaleString()}` : value
  }
  return value
}

const getTrendText = (rate) => {
  if (rate > 10) return '大幅增长'
  if (rate > 5) return '稳步增长'
  if (rate > 0) return '小幅增长'
  if (rate === 0) return '持平'
  if (rate > -5) return '小幅下降'
  return '大幅下降'
}

const handleAddComparison = () => {
  ElMessage.info('新增对比分析')
}

const handleAnalyze = () => {
  ElMessage.success('分析已更新')
}
</script>

<style scoped>
.analysis-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.chart-container {
  height: 350px;
}

.trend-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
}
</style>
